.dog-screen-paner {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  &.is-bg {
    background: #000c3b;
  }
  &.is-shadow {
    box-shadow: inset 0 0 30px #07417a;
  }
  &.is-angle {
    &:before {
      position: absolute;
      width: 1rem;
      height: 1rem;
      content: '';
      border-top: 2px solid #26c6f0;
      border-left: 2px solid #26c6f0;
      left: -1px;
      top: -1px;
    }
    &::after {
      position: absolute;
      width: 1rem;
      height: 1rem;
      content: '';
      border-top: 2px solid #26c6f0;
      border-right: 2px solid #26c6f0;
      right: -1px;
      top: -1px;
    }
    .foot-angle {
      &:before {
        position: absolute;
        width: 1rem;
        height: 1rem;
        content: '';
        border-bottom: 2px solid #26c6f0;
        border-left: 2px solid #26c6f0;
        left: -1px;
        bottom: -1px;
      }
      &:after {
        position: absolute;
        width: 1rem;
        height: 1rem;
        content: '';
        border-bottom: 2px solid #26c6f0;
        border-right: 2px solid #26c6f0;
        right: -1px;
        bottom: -1px;
      }
    }
  }
  @h-haed: 48px;
  .paner-head {
    box-sizing: border-box;
    padding: 0 16px;
    width: 100%;
    .head-title {
      height: @h-haed;
      font-size: 1.4rem;
      color: #fff;
      text-align: center;
      line-height: @h-haed;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      &.is-border {
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
      }
    }
    & + .paner-body {
      height: calc(100% - @h-haed);
    }
  }
  .paner-body {
    overflow: auto;
    box-sizing: border-box;
    height: 100%;
  }
  .paner-content {
    padding: 0 16px;
  }
}